{{! Pagination file for custom pagination}}

<nav class="pagination" role="navigation">
    {{!-- Actual place where the numbers will go --}}
    <p> Pages:<span id="pagination-list" class="page-number"></span></p>
    {{!-- Placeholder for number of total pages --}}
    <div id="page-total" style="display:none;">{{pages}}</div>
    {{!-- Placeholder for current page --}}
        <div id="page-current" style="display:none;">{{page}}</div>
</nav>

<script>
    //Grab the total pages value
    var pageTotal = document.getElementById('page-total').innerHTML;
    //Grab the current page value
    var pageCurrent = document.getElementById('page-current').innerHTML;
    //Grab the pagination span element
    var nav = document.getElementById('pagination-list');

    //For each number, from 1 to the total number of pages, add in the page number and a link to the page
    for (i = 1; i <= pageTotal; i++) {
        // If you are on the current page, bold the nubmer and do not link
        if (i == pageCurrent) {
                nav.innerHTML = nav.innerHTML + "<strong>" + i + "</strong>";
        } else {
            // Otherwise, add a link to the page
            // This is where all the customization can go, space between each link, commas, etc.
                nav.innerHTML = nav.innerHTML + "<a href=/page/" + i + ">" + i + "</a>";
        }
    }
</script>
